import React, {Component} from 'react'

import pagesService from '../services/pagesService'

export default class Film extends Component {
	constructor(){
		super();
		this.state = {
			filmList: [],
			filmList1: [],
			selectContent: '正在热映'
		}
	}
	render(){
		
		const tab1Style = {
			display: this.state.selectContent == '正在热映' ? "block" : "none"
		}
		const tab2Style = {
			display: this.state.selectContent == '即将上映' ? "block" : "none"
		}
		return(
			<div id="film" class="page">
				<div class="film-tabs">
					<a onClick={this.selectFilm.bind(this,'正在热映')}>正在热映</a>
					<a onClick={this.selectFilm.bind(this,'即将上映')}>即将上映</a>
				</div>
				<div class="film-list">
					<ul style={tab1Style}>
					{
						this.state.filmList.map((item,index)=>{
							return(
								<li key={index}>
									<div class="left img">									
										<img src={item.imgpath} />
									</div>
									<div class="film-introduce left">
										<h4>
											{item.name}
											<span class="right">{item.grade}<i>&gt;</i></span>
										</h4>
										<p>{item.intro}</p>
										<p><span>{item.cinemaCount}家影院上映</span> <span>{item.watchCount}人购票</span></p>
									</div>
								</li>
							)
						})
					}	
					</ul>
					<ul style={tab2Style}>
					{
						this.state.filmList1.map((item,index)=>{
							return(
								<li key={index}>
									<div class="left img">									
										<img src={item.imgpath} />
									</div>
									<div class="film-introduce left">
										<h4>
											{item.name}
											<span class="right"><i>&gt;</i></span>
										</h4>
										<p>{item.intro}</p>
										<p><span>{item.showdate}上映</span> <span>{item.showweek}</span></p>
									</div>
								</li>
							)
						})
					}	
					</ul>
				</div>
			</div>
		)
	}
	selectFilm(select){
		console.log(select);
		this.setState({selectContent: select});
		console.log(this.state.selectContent);
		//console.log(history);
		//console.log(location);
	}
	componentWillMount(){//组件创建前
		pagesService.getFilmNowPlaying()
		.then((res)=>{
			console.log(res);
			this.setState({filmList: res});
		});
		pagesService.getFilmComingSoon()
		.then((res)=>{
			console.log(res);
			this.setState({filmList1: res});
		});
	}
	Updating (state){
		
	}
}
